<script setup lang="ts">
// import { ArrowRight } from "@element-plus/icons-vue";
// import { useStore } from "@/stores/index";
import { useRouter } from "vue-router";
import { useExaminationStore } from "@/stores/examination";
import { ElMessage } from "element-plus";

const router = useRouter();
const examinationStore = useExaminationStore();
// const userStore = useStore();

const questionsCollection = JSON.parse(
  localStorage.getItem("questionsCollection") || "{}"
);
const data = Object.values(questionsCollection).map((item: any) => {
  const d = new Date(item.time);
  const y = d.getFullYear();
  const m =
    d.getMonth() + 1 >= 10 ? d.getMonth() + 1 : "0" + (d.getMonth() + 1);
  const dd = d.getDate() >= 10 ? d.getDate() : "0" + d.getDate();
  item.date = y + "-" + m + "-" + dd;

  if (item.examTypeId == 1) {
    item.type = "日考";
  } else if (item.examTypeId == 2) {
    item.type = "周考";
  } else if (item.examTypeId == 3) {
    item.type = "月考";
  }
  return item;
});
const examinationList = Object.values(data).reverse();

const beginExaminationHandler = (id: any) => {
  // console.log(id);
  // examinationStore.setCount(id);
  // examinationStore.setQuestionId(id);
  // router.push("/answertheexamination");
  examinationStore
    .createExaminationActionAgain(id)
    .then(() => {
      router.push("/answertheexamination");
    })
    .catch((err) => {
      console.log("重新生成考题失败：", err);
      ElMessage.error(err);
    });
};
const jumpAnswerResultHandler = (id: any) => {
  examinationStore.setQuestionIdForAnswer(id);
  router.push("/answerresult");
};

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<template>
  <main>
    <div class="page-header">
      <div class="page-title">
        <p>查看试卷列表</p>
      </div>
    </div>

    <div class="page-body">
      <el-table :data="examinationList" style="width: 100%">
        <!-- <el-table-column prop="examinationName" label="试卷名称" width="300" /> -->
        <el-table-column prop="type" label="考题频率" width="100" />
        <el-table-column
          prop="levelArrayId"
          label="考题难度"
          width="80"
          show-overflow-tooltip
        />
        <el-table-column prop="count" label="试卷次数" width="80" />
        <el-table-column prop="score" label="最高分" width="80" />
        <el-table-column prop="date" label="考试时间" width="120" />
        <el-table-column label=" " width="220">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="beginExaminationHandler(scope.row.id)"
              >重做试卷</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="jumpAnswerResultHandler(scope.row.id)"
              >查看试卷解析</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="1"
        class="mt-4"
        @current-change="handleCurrentChange"
      />
    </div>
  </main>
</template>

<style lang="scss">
.bread-crumb {
  margin-top: 20px;
}
</style>
